<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Detailed Info...</title>      
        <link rel="stylesheet" href="../../javascript/libs/bootstrap/css/bootstrap.css">
        <link rel="stylesheet" href="../../css/custom.css">
        <script type="text/javascript" src="../../javascript/libs/bootstrap/js/bootstrap.js"></script>
    </head>
    <body>
        <header class="navbar  navbar-fixed-top" role="navigation"><section class="row">
                <div class="col-md-3">
                    <div class="navbar-header"> 
                        <a class="navbar-brand" href="#store">
                            <p class="LogoLabel">AroCity</p>
                        </a>
                    </div>

                </div>
                <div id="searchBox" class="col-sm-8 col-lg-8 col-md-8"><section class="serchBox row">
                        <div class="col-sm-7 col-lg-7 col-md-7">
                            <div class="input-group">
                                <div class="input-group-btn">
                                    <select id="selectCategoryDrpDown" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                        <option>Select City</option>
                                        <option>Bangalore</option>
                                        <option>Mangalore</option>
                                        <option>Hyderabad</option>
                                        <option>Chennai</option>



                                    </select>
                                </div><!-- /btn-group -->
                                <input id="searchItem" type="text" class="form-control" placeholder="search for product, category or brand">
                                <span class="srchIcon glyphicon glyphicon-search"></span>
                            </div><!-- /input-group -->
                        </div><!-- /.col-lg-6 -->
                        <div class="searchBtn col-sm-4 col-lg-4 col-md-4">
                            <button id="btnSearchItem" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search"></span> Search
                            </button>	
                        </div>
                    </section><!-- /.row --></div>
            </section>
            <section class="row">
                <div class="container" style="margin-top: 20px;">
                    <!-- LEFT PART -->
                    <div class="col-sm-6 col-lg-6 col-md-6">

                    </div>
                    <!-- RIGHT PART -->
                    <div class="pull-right">

                        <!--CARTING PRODCUTS-->
                        <div class="pull-right">


                        </div>

                    </div>
                </div>





                </div>
                </div>

                <div class="sub-header">

                </div>
            </section>




        </header>
    <main class="body-container container">
        <section id="bodyPart" class="row" style="min-height: 500px ">
            <!-- LEFT Side Navigation -->

            <!-- RIGHT SIDE-->
            <aside class="col-md-12">



                <section id="items-row" class="row" style="margin-top:10px">
                    <div>
                        <h3>Detailed View <a> Apple iPhone 6 and iPhone 6 plus</a> in Bangalore</h3>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="nav nav-tabs" role="tablist">
                                <li class="active"><a href="#">Product Info</a></li>
                                <li><a href="#">Retailer Info</a></li>
                                <li><a href="#">More Info</a></li>
                          </ul>
                        </div>
                       <div class="col-xs-12">
                           <div class="panel panel-info" style="margin-top: 10px">
                                <div class="panel-heading">Product Information of About Apple iPhone 6 and iPhone 6 plus</div>
                                <div class="panel-body">
                                    <div class="col-xs-10">
                                        <p>
                                              Buy the iPhone 6 Plus from EE. Superfast,
                                              easy to use and available in a range of colours. 
                                              The biggest fastest network in the UK.
                                              Buy the iPhone 6 Plus from EE. Superfast,
                                              easy to use and available in a range of colours. 
                                              The biggest fastest network in the UK.
                                              Buy the iPhone 6 Plus from EE. Superfast,
                                              easy to use and available in a range of colours. 
                                              The biggest fastest network in the UK.
                                        </p>
                                    </div>
                                    <div class="col-xs-2">
                                        <img class="slide-image" src="../img/iphone.jpg" alt="" width="150px" height="100px" />
                                    </div>
                                
                                </div>
                              </div>

                            
                        </div>
                    </div>
                </section>
            </aside>
        </section>
        <hr>
        <footer>
            <div class="row">
                <div class="col-sm-8">
                    <p>All rights reserved by arocity.com © 2014</p>
                </div>
                <div class="col-sm-4">
                    <div class="btn-toolbar" role="toolbar">

                        <div class="btn-group"><a href="#contactUs">Contact Us |</a></div> 
                        <div class="btn-group"><a href="#aboutUs">About Us  |</a></div>
                        <div class="btn-group"><a href="#aboutUs">More</a></div>
                    </div>
                </div>
            </div>
        </footer>
    </main>
    <!-- /container -->       
    <script src="javascript/libs/jquery/jquery.js"></script>   
    <script src="javascript/libs/bootstrap/js/bootstrap.js"></script>
    </body>
</html>
